<template>
	<div class="system-edit-dept-container">
		<el-dialog :title="'会员充值'" v-model="isShowDialog" width="769px" @close="closeDialog" >
			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="会员名" prop="name">
							{{ formData.name }}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="余额" prop="money">
							{{ formData.money }}
						</el-form-item>
					</el-col>
				</el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="充值店铺" prop="shop_id">
						<el-cascader
							:options="list"
							:props="{ emitPath:false, value: 'id', label: 'name',expandTrigger: 'hover' as const, }"
							placeholder="请选择店铺"
							clearable
							class="w100"
							:show-all-levels="false"
							v-model="formData.shop_id">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="充值金额" prop="recharge_money">
							<el-input v-model="formData.recharge_money" type="number"  placeholder="充值金额" clearable></el-input>
						</el-form-item>
					</el-col>
					
				</el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="备注">
						<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" maxlength="150"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">充 值</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
import {recharge} from "/@/api/zmm/member";
import {getList} from "/@/api/zmm/shop";


import {ElMessage} from "element-plus";

// 定义接口来定义对象的类型
interface FormState {
  id:number;
	name: string;
	money:number;
	recharge_money:number;
	remark:string;
	shop_id:number;
}
interface PageSate {
	isShowDialog: boolean;
	list:Array<any>;
	formData: FormState;
  rules: object;
}


export default defineComponent({
	name: 'zmmMemberRecharge',
	setup(prop,{emit}) {
    const {proxy} = getCurrentInstance() as any;
	let re_row = {}

    const formRef = ref<HTMLElement | null>(null);
		const state = reactive<PageSate>({
			isShowDialog: false,
			formData: {
        		id:0,
				name: '', // 部门名称
				money:0,
				recharge_money:0,
				remark:'',
				shop_id:0,

			},
			list:[],

      rules: {
		shop_id:[
			{required: true, message: "请选择店铺", trigger: "blur"}, {validator:(rule: any, value: any, callback: any)=>{ console.log(value); return value > 0 ?callback():callback(new Error('请选择店铺'));}, trigger: "blur"}
	  ], recharge_money:[{required: true, message: "请输入充值金额", trigger: "blur"}, {validator:(rule: any, value: any, callback: any)=>{ 

if(value == 0)  return callback(new Error('充值金额不能为0'));

return callback();

}, trigger: "blur"}]
      }
		});
		// 打开弹窗
		const openDialog = (row?: FormState|number) => {
      resetForm()
      getList().then((res:any)=>{
		// const list = { id: 0, name: '主店铺', children: [] };
		// list.children = proxy.handleTree(res.data.zmm_shop_list??[], "id","up_id");
		// state.list=new Array(list) as any;
		state.list = proxy.handleTree(res.data.zmm_shop_list??[], "id","up_id");
          
      });
		
      if(row && typeof row === "object"){
		re_row = row;
        state.formData = row;
		state.formData.remark = '';
      }
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
			state.formData = re_row
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
        //   if(state.ruleForm.deptId===0){
        //     //添加
        //     addDept(state.ruleForm).then(()=>{
        //       ElMessage.success('角色添加成功');
        //       closeDialog(); // 关闭弹窗
        //       emit('deptList')
        //     });
        //   }else{
            //修改
            recharge(state.formData).then(()=>{
              ElMessage.success('充值成功');
              closeDialog(); // 关闭弹窗
              emit('list')
            });
        //   }
        }
      });
		};
	
    const resetForm = ()=>{
      state.formData = {
        id:0,
        name: '', 
		money:0,
		recharge_money:0,
		remark:'',
		shop_id:0,
      }
	  state.list = [];
    };
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
      formRef,
			...toRefs(state),
		};
	},
});
</script>
